<template>
	<view class="tab-bar-box">
		<block v-for="(tab,index) in tabList" :key="index">
			<view :class="[index == currentIndex?'tab-bar-item active': 'tab-bar-item']" :id="index" :data-status="tab.status" @tap="clickTabBar">
				{{tab.title}}
				<view class="tab-bar-line" v-if="showLine"></view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			tabList: {
				type: Array,
				default: []
			},
			showLine: {
				type: Boolean,
				default: false
			}
			
		},
		data(){
			return {
				currentIndex: 0
			}
		},
		methods:{
			clickTabBar(e) {
				const currentIndex = e.target.id
				this.currentIndex = currentIndex;
				this.$emit('clickTabBar', currentIndex, e.currentTarget.dataset.status)
			}
		}
	}
</script>

<style>
	.tab-bar-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 15rpx;
	}
	.tab-bar-box .tab-bar-item {
		height: 100%;
		flex: 1 1 33%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #686661;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab-bar-box .active {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #016fb8 ;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.active .tab-bar-line {
		position: absolute;
		bottom: 10rpx;
		width: 108rpx;
		height: 4rpx;
		background: #016fb8;
		opacity: 1;
		border-radius: 6rpx;
		margin-top: 10rpx;
	}
</style>